<template>
    <div class="echarts-root">
        <div :id="ecahrtId" style="width: 100%;" :style="{ height: cHeight }"></div>
    </div>
</template>

<script setup>
//贵州地图用户热点分布
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const ecahrtId = 'gzMapEchartDiv' + Math.floor(Math.random() * 10000);

const props = defineProps({
    // 图表高度，带单位
    cHeight: {
        type: String,
        default: '230px',
    },
    title: {
        type: String,
        default: '',
    },
    noCenterTxt: {
        type: Boolean,
        default: false,
    },
    datas: {
        type: Array,
        default: () => {
            return []
        }
    }
});

watch(() => props.datas, value => initEcharts(value))

//图表对象
const echartsObj = ref(null);

//初始化图表
const initEcharts = (seriesDatas = []) => {
    if (echartsObj.value == null) {
        echartsObj.value = echarts.init(document.getElementById(ecahrtId));
    }
    if (!seriesDatas) {
        seriesDatas = []
    }
    // echartsObj.value.showLoading();
    let maxValue = 0
    let xDatas = []
    seriesDatas.map(item => {
        xDatas.push({
            value: item.value,
            name: item.name
        })
        if (item.value && item.value > maxValue) {
            maxValue = parseInt(item.value)
        }
    })
    maxValue += 10

    echarts.registerMap('GuiZhou', GzMapJson, {
        Alaska: {
            left: -131,
            top: 25,
            width: 15
        },
        Hawaii: {
            left: -110,
            top: 28,
            width: 5
        },
        'Puerto Rico': {
            left: -76,
            top: 26,
            width: 2
        }
    });
    let option = {
        title: {
            text: props.title,
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2
        },
        visualMap: {
            left: 'right',
            min: 0,
            max: maxValue,
            inRange: {
                color: [
                    '#EEE685',
                    '#00BFFF',
                ]
            },
            text: ['高', '低'],
            calculable: false
        },
        series: [{
            name: '',
            type: 'map',
            roam: true,
            map: 'GuiZhou',
            emphasis: {
                label: {
                    show: true
                }
            },
            label: {
                show: true,
                color: '#000000',
                formatter: function (val) {
                    console.log(val)
                    if (val.value > 0) {
                        return val.name + '：' + val.value;
                    }
                    return ''
                }
            },
            data: xDatas
        }
        ]
    };
    echartsObj.value.setOption(option);

    window.addEventListener('resize', () => {
        if (echartsObj.value) {
            echartsObj.value.resize()
        }
    })
}


onMounted(() => {
    initEcharts()
})
</script>

<style lang="scss" scoped>
.echarts-root {
    position: relative;
    width: 100%;
    height: 100%;

    .total-div {
        position: absolute;
        top: 36%;
        left: 50%;
        z-index: 11;
        width: 120px;
        height: 70px;
        margin-left: -60px;
        text-align: center;
        border-radius: 10px;

        .total {
            font-size: 30px;
            color: #000;
        }

        .tag {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    }
}
</style>